<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>教学管理——加密助手</title>
    <meta name="description" content="作者：逄沛然
学校：青岛第二实验初级中学">
    <meta name="keywords" content="教学管理,加密">
    <meta name="author" content="逄沛然">
    <meta property="og:title" content="教学管理——加密助手">
    <meta property="og:description" content="作者：逄沛然
学校：青岛第二实验初级中学">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="教学管理——加密助手">
    <meta name="twitter:description" content="作者：逄沛然
学校：青岛第二实验初级中学">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/base/jquery-ui.min.css" rel="stylesheet">
    <link href="css/en_index.css?v=12" rel="stylesheet">
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script>
        $(document).ready(function () {
            $("a[href*='#Frame']").click(function (event) {
                event.preventDefault();
                $('html, body').stop().animate({ scrollTop: $('#Frame').offset().top }, 600, 'linear');
            });
            $("#PictureUpload :file").on('change', function () {
                var input = $(this).parents('.input-group').find(':text');
                input.val($(this).val());
            });
            $("#Tabs").tabs(
                {
                    show: { effect: 'slide', direction: 'left', duration: 300, easing: 'swing' },
                    hide: { effect: 'slide', direction: 'right', duration: 300, easing: 'swing' },
                    event: 'click',
                    collapsible: false
                });
            $("#Tabs").on('tabsactivate', function (event, ui) {
                var indexNew = $(this).find('li').index(ui.newTab);
                switch (indexNew) {
                    case 0:
                        if (document.getElementById("PictureUpload-input").value.length > 0) str = document.getElementById('Picture').childNodes[1].childNodes[3].src;;
                        break;
                    case 1:
                        str = document.getElementById('PlainText').value;;
                        break;
                }
            });
        });
    </script>
    <script src="./js/en_decryption.js"></script>
    <script>
        let str = "内容为空";

        function loadImg() {
            if (document.getElementById("PictureUpload-input").value.length > 0) {
                if (document.getElementById('Picture').childNodes[1].childElementCount > 1)
                    document.getElementById('Picture').childNodes[1].removeChild(document.getElementById('Picture').childNodes[1].lastChild);
                handleFiles(document.getElementById('PictureUpload-file').files);
                setTimeout("str = document.getElementById('Picture').childNodes[1].childNodes[3].src;", 50);
            }
        }

        function handleFiles(files) {
            let preview = document.getElementById('Picture').childNodes[1];
            for (let i = 0; i < files.length; i++) {
                let file = files[i];
                let imageType = /^image\//;

                if (!imageType.test(file.type)) {
                    continue;
                }

                let img = document.createElement("img");
                img.classList.add("pic");
                img.file = file;

                preview.appendChild(img);

                let reader = new FileReader();
                reader.onload = (function (aImg) {
                    return function (e) {
                        aImg.src = e.target.result;
                    };
                })(img);
                reader.readAsDataURL(file);
            }
        }

        function encryption() {
            let ttime = Number(document.getElementById('SelectTime').value);
            if (ttime > 0) {
                document.getElementById('CipherText').value = ed_encryption(unixTime() + ttime, randT(), str);
            }
            else if (ttime == -1) {
                let tinput = Math.floor(Number(prompt('请输入时间（分钟）：'))) * 60;
                document.getElementById('CipherText').value = ed_encryption(unixTime() + tinput, randT(), str);
            }
            else {
                let tinput = Math.floor(Number(prompt('请输入时间（小时）：'))) * 3600;
                document.getElementById('CipherText').value = ed_encryption(unixTime() + tinput, randT(), str);
            }
        }
    </script>
</head>
<body>
    <div id="Frame">
        <div class="TOP">
            <div id="wb_Heading1">
                <h1 id="Heading1">教学管理——加密助手</h1>
            </div>
        </div>
        <div class="TAB">
            <div id="Tabs">
                <ul>
                    <li role="presentation"><a href="#tabs-page-1"><span>加密图片</span></a></li>
                    <li role="presentation"><a href="#tabs-page-2"><span>加密文字</span></a></li>
                </ul>
                <div id="tabs-page-1">
                    <div id="Picture">
                        <div class="FILE_INSIDE">
                            <div id="PictureUpload" class="input-group">
                                <input class="form-control" type="text" readonly id="PictureUpload-input" placeholder="请点击右侧“选择图片”" title="仅接受图片">
                                <label class="input-group-btn">
                                    <input type="file" accept=".bmp,.dib,.gif,.jfif,.jpe,.jpeg,.jpg,.png,.webp" name="PictureUpload" id="PictureUpload-file"><span class="btn">选择图片</span>
                                </label>
                            </div>
                        </div>
                        <div class="PIC">
                        </div>
                        <div class="LOAD">
                            <a id="Button1" href="javascript:void(0);" onclick="loadImg();return false;">上传</a>
                        </div>
                    </div>
                </div>
                <div id="tabs-page-2">
                    <textarea name="PlainText" id="PlainText" onchange="str = document.getElementById('PlainText').value;return false;" rows="19" cols="115" spellcheck="false" title="文本">在此输入文字</textarea>
                </div>
            </div>
        </div>
        <div class="TIME">
            <div id="wb_Heading3">
                <h1 id="Heading3">解密时间（后）：</h1>
            </div>
        </div>
        <div class="UNIX">
            <select name="SelectTime" size="1" id="SelectTime">
                <optgroup label="分钟">
                    <option value="60">1分钟后</option>
                    <option value="300">5分钟后</option>
                    <option value="600">10分钟后</option>
                    <option selected value="900">15分钟后</option>
                    <option value="1800">30分钟后</option>
                    <option value="2700">45分钟后</option>
                </optgroup>
                <optgroup label="小时">
                    <option value="3600">1小时后</option>
                    <option value="7200">2小时后</option>
                    <option value="28800">8小时后</option>
                    <option value="43200">12小时后</option>
                    <option value="86400">24小时后</option>
                </optgroup>
                <optgroup label="自定义（点击“加密”按钮后输入）">
                    <option value="-1">输入等待分钟（整数）</option>
                    <option value="-2">输入等待小时（整数）</option>
                </optgroup>
            </select>
        </div>
        <div class="BUTTON2">
            <a id="Encryption" href="javascript:void(0);" onclick="encryption();return false;">加密</a>
        </div>
        <div class="TEXT">
            <textarea name="CipherText" id="CipherText" rows="5" cols="116" readonly spellcheck="false"></textarea>
        </div>
        <div class="BOTTOM">
            <div id="wb_Heading2">
                <h1 id="Heading2"><br><center><b>操作说明</b></center><br><center>一、内容</center>1. 加密图片：点击上方“加密图片”选项；点击“选择图片”按钮；确认选择完毕后，点击“上传”，可以在页面内预览图片。<br>2. 加密文字：点击上方“加密文字”选项；在文本框内输入要加密的文字。<br><br><center>二、加密</center>1. 选择解密时间（即多长时间后可以解密）：点击“解密时间”后方的下拉菜单，选择合适的时间；<br>2. 点击“加密”按钮。<br><br>作者：逄沛然<br>学校：青岛第二实验初级中学</h1>
            </div>
        </div>
    </div>
</body>
</html>